<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interlaced animation - 交错动画</title>

    <style>
        body {
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
        }

        .loading {
            display: flex;
        }

        .dot {
            position: relative;
            width: 2em;
            height: 2em;
            margin: 0.8em;
            border-radius: 50%;
        }

        .dot::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background: inherit; /*inherit关键字使得元素获取其父元素的计算值*/
            border-radius: inherit;
            animation: wave 2s ease-out infinite;
        }

        .bg1 {
            background: #7ef9ff; 
        }
        .bg1::before {
            animation-delay: 0.2s;
        }

        .bg2 {
            background: #89cff0;
        }
        .bg2::before {
            animation-delay: 0.4s;
        }

        .bg3 {
            background: #4682b4;
        }
        .bg3::before {
            animation-delay: 0.6s;
        }

        .bg4 {
            background: #0f52ba;
        }
        .bg4::before {
            animation-delay: 0.8s;
        }

        .bg5 {
            background: #000080;
        }
        .bg5::before {
            animation-delay: 1s;
        }

        @keyframes wave {
            50%,
            75% {
                transform: scale(2.5);
            }

            80%,
            100% {
                opacity: 0;
            }
        }

        a::before {
            content: "❤";
        }

        a::after {
            content: "▷";
        }

    </style>
</head>

<body>
    
    <div class="loading">
        <div class="dot bg1"></div>
        <div class="dot bg2"></div>
        <div class="dot bg3"></div>
        <div class="dot bg4"></div>
        <div class="dot bg5"></div>
    </div>

</body>

</html>